<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="员工名称">
        <el-input v-model="staff.name"/>
      </el-form-item>
      <el-form-item label="员工排序">
        <el-input-number v-model="staff.sort" controls-position="right" min="0"/>
      </el-form-item>
      <el-form-item label="员工部门">
        <el-select v-model="staff.level" :value="sectionKeys[staff.level]" clearable placeholder="请选择">
                <el-option
                    v-for="item in sectionList"
                    :key="item.id"
                    :label="item.sectionName"
                    :value="item.id"
                ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="职工资历">
        <el-input v-model="teacher.career"/>
      </el-form-item> -->
      <el-form-item label="个人信息">
        <el-input v-model="staff.intro" :rows="5" type="textarea"/>
      </el-form-item>


      <!-- 用户头像 -->
        <el-form-item label="员工头像">

            <!-- 头衔缩略图 -->
            <pan-thumb :image="staff.avatar"/>
            <!-- 文件上传按钮 -->
            <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
            </el-button>

            <!--
        v-show：是否显示上传组件
        :key：类似于id，如果一个页面多个图片上传控件，可以做区分
        :url：后台上传的url地址
        @close：关闭上传组件
        @crop-upload-success：上传成功后的回调 -->
            <image-cropper
                        v-show="imagecropperShow"
                        :width="300"
                        :height="300"
                        :key="imagecropperKey"
                        :url="BASE_API+'/oss/fileoss'"
                        field="file"
                        @close="close"
                        @crop-upload-success="cropSuccess"/>

        </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import staffApi from '@/api/manager/staff'
import section from '@/api/manager/section'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
    components:{ImageCropper, PanThumb},
    data(){
        return{
            staff:{
               // sort: 0
               },
           imagecropperShow: false,
           imagecropperKey: 0,
            BASE_API: process.env.BASE_API,saveBtnDisabled: false,sectionList: null,
            sectionKeys:{}
        }
    },
    created(){
        this.init()
        this.getSectionList()
    },
    watch:{ $route(to,from){ this.init()
        }
    },
    methods:{
        init(){
           if(this.$route.params && this.$route.params.id){
               const id = this.$route.params.id

               this.getInfo(id)
            }else{
                this.staff = {}
            }
        },
        getSectionList(){
            section.getSectionList()
            .then(res => {
                console.log(res)
                this.sectionList = res.data.items
                for(let i in this.sectionList){
                  this.sectionKeys[sectionList[i].id] = sectionList[i].sectionName
                }
            })
        },
       getInfo(id){
            staffApi.getStaffInfo(id)
            .then(response => {
                this.staff = response.data.staff
            })
        },

       saveOrUpdate(){
           if(!this.staff.id){
                 this.saveStaff();
              }else{
                 this.updateStaff();
              }
        },
       updateStaff(){
            staffApi.updateStaff(this.staff)
            .then(response => {
               this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
               this.$router.push({path:'/staff/list'})
            })
        },
       saveStaff(){
            staffApi.addStaff(this.staff)
            .then(response => {
               this.$message({
                    type: 'success',
                    message: '保存成功!'
                });
               this.$router.push({path:'/staff/list'})
            })
            .catch()
        },
        close(){this.imagecropperShow = false
         this.imagecropperKey = this.imagecropperKey + 1
        },
        cropSuccess(data){ // 上传后接口会返回图片地址
          this.staff.avatar = data.url
          this.imagecropperShow = false
          this.imagecropperKey = this.imagecropperKey + 1
        }
    }
}
</script>
